<template>
	<view class="info-label">
		
		<uv-row>
			<uv-col span="4">
				<uv-text size="20" bold align="center" text="宠物信息"></uv-text>
			</uv-col>
			<uv-col span="1" offset="6">
				<uv-icon name="edit-pen" size="30"></uv-icon>
			</uv-col>
		</uv-row>
		
		<view class="frame">
			
			<uv-row>
				<uv-col span="2.5">
					<uv-text size="18" line-height="35" text="它叫做" ></uv-text>
				</uv-col>
				<uv-col>
					<uv-text size="18" bold line-height="35" :text="props.pet.name" ></uv-text>
				</uv-col>
			</uv-row>
			
			<uv-row>
				<uv-col span="2.5">
					<uv-text size="18" line-height="35" text="它是只" ></uv-text>
				</uv-col>
				<uv-col>
					<uv-text size="18" bold line-height="35" :text="props.pet.type" ></uv-text>
				</uv-col>
			</uv-row>
			
			<uv-row>
				<uv-col span="2">
					<uv-text size="18" line-height="35" text="生日" ></uv-text>
				</uv-col>
				<uv-col>
					<uv-text size="18" bold line-height="35" mode="date" :text="props.pet.birthday" ></uv-text>
				</uv-col>
			</uv-row>
			
		</view>
		
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app'
	const props = defineProps({
		pet: {
			type: Object,
			required: true
		}
	})
	onLoad(() => {
		console.log(props.pet)
		})
</script>

<style lang="scss">
	.info-label{
		border-radius: 20rpx;
		overflow: hidden;
		padding-top: 40rpx;
		left: 15rpx;
		min-height: 900rpx;
		max-height: 900rpx;
		min-width: 720rpx;
		max-width: 720rpx;
		background: #fffbff;
		position: relative;
		.frame{
			padding-top: 50rpx;
			padding-left: 50rpx;
		}
	}
</style>